<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor para Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Map Tour - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
    <!-- ADD Google Analytics here -->
    <!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
                <!-- ADD Google Custom Search -->
                <!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div><!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div><!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; Map Tour
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>                
                Map Tour              
              </h1>
              <h2>
                Que estás construyendo
              </h2>
              <div class="imagecontainer">
                <img align="right" alt="" border="0" src="MapTourAssets/listPicker.png">
              </div>
              <p>
                Este es un tutorial de dos partes que introduce el componente <span class="ButtonText">ActivityStarter</span> para lanzar aplicaciones de Android arbitrariamente y el componente <span class="ButtonText">ListPicker</span> para permitir al usuario elegir de una lista de elementos. Construirás MapTour, una aplicación para visitar destinos franceses de vacaciones con un solo clic. Los usuarios de tu aplicación podrán visitar la torre Eiffel, el Louvre y Notre Dame en una rápida sucesión.<br>
              </p>
              <p>
                Para realizar este tutorial se supone que ya estas familiarizado con los conceptos básicos de App Inventor -- el uso del Diseñador de componentes para construir una interfaz de usuario, y el uso del Editor de bloques para especificar controladores de evento. Si no estas familiarizado con estos conceptos básicos, prueba a realizar algunos de los <a href="../../../learn/tutorials/index.html">tutoriales básicos</a> antes de continuar.
              </p>
              <p>
                Una vez que hayas completado la primera parte de este tutorial, sigue con la <a href="../../../learn/tutorials/maptour/maptour2.html">parte 2</a>.
              </p>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate al sitio web de App Inventor  y comienza un nuevo proyecto. Nómbralo  MapTour, y también el <span class="ButtonText">Title</span> (título) de la pantalla a MapTour. Abre el editor de bloques y conéctalo al teléfono.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                Diseñarás la aplicación de modo que muestre una lista de destinos. Cuando el usuario elije uno, la aplicación Google Maps se inicia para mostrar un mapa del destino.
              </p>
              <p>
                Este tutorial introduce los siguientes conceptos de App Inventor:<br>
              </p>
              <ul>
                <li>El componente Activity Starter para lanzar otras aplicaciones Android desde tu aplicación.
                </li>
                <li>El componente ListPicker (selector de lista), para permitir al usuario elegir entre una lista de posibilidades.<br>
                </li>
              </ul>
              <h2>
                Prepara los componentes <br>
              </h2>
              <p>
                La interfaz del usuario para MapTour es simple: solo tendrás un componente ListPicker y un componente ActivityStarter (no visible). La vista de diseño debe quedar así cuando hayas terminado:
              </p>
              <div class="imagecontainer">
                <img alt="" src="MapTourAssets/designer.png" width="961">
              </div>
              <p>
                Los componentes listados a continuación serán usados para crear esta ventana en el diseñador. Arrastra cada componente desde la <span class="ButtonText">Paleta</span> al <span class="ButtonText">Visor</span> (Viewer) y nómbralo como se especifica:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de componente
                      </td>
                      <td class="tbl-header">
                        Grupo de la paleta
                      </td>
                      <td class="tbl-header">
                        Como lo llamarás
                      </td>
                      <td class="tbl-header">
                        Propósito del componente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Image</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">Image1</span>
                      </td>
                      <td>
                        Muestra una imagen estática del mapa de París en la pantalla
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ListPicker</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">ListPicker1</span>
                      </td>
                      <td>
                        Muestra la lista de destinos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ActivityStarter</span>
                      </td>
                      <td>                        
                        other stuff                      
                      </td>
                      <td>
                        <span class="ButtonText">ActivityStarter1</span>
                      </td>
                      <td>
                        Inicia la aplicación maps cuando se elige un destino<br>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Descarga el archivo <a href="MapTourAssets/parismap.png">parismap.png</a> a tu ordenador, después haz clic en <span class="ButtonText">Add</span> en la sección <span class="ButtonText">Media</span> para cargarlo en tu proyecto. Para que aparezca, tendrás ademas que colarlo en la propiedad Picture de Image1.
              </p>
              <p>
                El componente <span class="ButtonText">ListPicker</span> tiene un botón asociado -- cuando el usuario hace clic en el se despliega la lista de elecciones. Cambia el texto de este botón ajustando la propiedad <span class="ButtonText">Text</span> de <span class="ButtonText">ListPicker1</span> a "Choose Destination" (Elije el destino).
              </p>
              <h2>
                Ajustando las propiedades de ActivityStarter
              </h2>
              <p>
                <span class="ButtonText">ActivityStarter</span> es un componente que te permite iniciar cualquier aplicación Android -- el navegador, mapas, o cualquier otra de tus aplicaciones. Cuando se lanza otra aplicación desde la tuya, el usuario puede hacer clic en el botón atrás para volver a tu aplicación. Construirás MapTour, por lo que la aplicación Mapas se iniciará para mostrar mapas particulares basados en la elección de usuario. El usuario podrá entonces pulsar el botón atrás para volver a tu aplicación y elegir un destino diferente.
              </p>
              <p>
                <span class="ButtonText">ActivityStarter</span> es relativamente un componente de bajo nivel al que necesitaras ajustar algunas propiedades con información familiar para los programadores en Java Android SDK, pero extraña para el restante 99.999% de la gente en el mundo. No te preocupes por ahora. Copiando el ejemplo de información de protocolo mostrada aquí, podas aprender fácilmente como lanzar otras aplicaciones, como Maps, desde las aplicaciones que estas creando.
              </p>
              <p>
                Para hacer que <span class="ButtonText">ActivityStarter</span> inicie la aplicación Maps, ajusta las siguientes propiedades en el Diseñador de Componentes:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Propiedad
                      </td>
                      <td class="tbl-header">
                        Valor
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Action</span>
                      </td>
                      <td>                        
                        android.intent.action.VIEW                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ActivityPackage</span>
                      </td>
                      <td>                        
                        com.google.android.apps.maps                      
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ActivityClass</span>
                      </td>
                      <td>                        
                        com.google.android.maps.MapsActivity                      
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Con estos valores ajustados, podrás iniciar la aplicación Maps. En el editor de bloque, vas a ajustar una propiedad mas, <span class="ButtonText">DataUri</span>, la cual te permitirá iniciar Maps mostrando un mapa en particular. Esta propiedad debe ajustarse en el Editor de bloque porque cambiará basándose en si el usuario elige visitar el Louvre, la Torre Eiffel. o Notre Dame.
              </p>
              <h2>
                Crear una lista de destinos
              </h2>
              <p>
                Abre el Editor de bloques y crea una variable con la lista de destinos para MapTour. Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable</span> ("Destinations")                      
                      </td>
                      <td>                        
                        Definitions                      
                      </td>
                      <td>
                        crea una lista de destinos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make a list</span>
                      </td>
                      <td>                        
                        Lists<br>
                      </td>
                      <td>
                        úsala para añadir los elementos de la lista<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("Tour Eiffel")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        el primer destino
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("Musee du Louvre")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        el segundo destino
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("Cathedrale Notre Dame")<br>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        el tercer destino<br>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="141" src="MapTourAssets/destinationList.png" width="489">
              </div>
              <h2>
                Añade comportamientos a los componentes
              </h2>
              <p>
                MapTour tiene dos comportamientos:
              </p>
              <p>
                1. Cuando se inicia, la aplicación carga la lista de destinos dentro del componente <span class="ButtonText">ListPicker</span> para que el usuario pueda elegir.
              </p>
              <p>
                2. Cuando el usuario elige un destino de <span class="ButtonText">ListPicker</span>, la aplicación Maps se inicia para mostrar un mapa de ese destino. Para la parte I, solo abrirás la aplicación Maps y le indicarás que busque el destino elegido.
              </p>
              <p>
                El componente <span class="ButtonText">ListPicker</span> muestra una lista de elementos cuando el usuario hace clic en un botón. <span class="ButtonText">ListPicker</span> tiene una propiedad <span class="ButtonText">Elements</span>. Si ajustas <span class="ButtonText">Elements</span> a una lista, los elementos de esa lista aparecerán en <span class="ButtonText">ListPicker</span>. Para esta aplicación, tendrás que ajustar la propiedad <span class="ButtonText">Elements</span> de <span class="ButtonText">ListPicker</span> a la lista de destinos que acabas crear. Como quieres que esto ocurra cuando se inicie la aplicación, definirás ente comportamiento en el evento <span class="ButtonText">Screen1.Initialize</span>. Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Screen1.Initialize</span>
                      </td>
                      <td>                        
                        Screen1                      
                      </td>
                      <td>
                        este evento se activa cuando se inicia la aplicación.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set ListPicker1.Elements to</span>
                      </td>
                      <td>                        
                        ListPicker1                      
                      </td>
                      <td>
                        ajusta esta propiedad a la lista que deseas que aparezca<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global destinations</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        la lista de destinos
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="110" src="MapTourAssets/screenInit.png" width="369">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                <span class="ButtonText">Screen1.Initialize</span> se activa cuando se inicia la aplicación. El controlador de evento solo ajusta la propiedad <span class="ButtonText">Elements</span> de <span class="ButtonText">ListPicker</span> por los que tres destinos apareceran.
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> Haz clic en el botón "Choose Destination" en el teléfono. El selector de lista (list picker) debe aparecer con los tres elementos.
              </blockquote>
              <h2>
                Iniciando Maps con una búsqueda del destino
              </h2>
              <p>
                A continuación, programarás el comportamiento que debe realizarse cuando el usuario elija uno de los destinos -- <span class="ButtonText">ActivityStarter</span> debe iniciar la aplicación Maps y buscar el destino elegido.
              </p>
              <p>
                Cuando el usuario elige un elemento del componente <span class="ButtonText">ListPicker</span>, se inicia el evento <span class="ButtonText">ListPicker.AfterPicking</span>. En el controlador de evento para <span class="ButtonText">AfterPicking</span> necesitaras ajustar <span class="ButtonText">DataUri</span> en el componente ActivityStarter para que este sepa cual es el mapa que tiene que abrir, después necesitas iniciar la aplicación usando StartActivity.
              </p>
              <p>
                Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ListPicker1.AfterPicking</span>
                      </td>
                      <td>                        
                        ListPicker1                      
                      </td>
                      <td>
                        este evento se inicia cuando el usuario elige un elemento de <span class="ButtonText">ListPicker</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set ActivityStarter1.DataUri to</span>
                      </td>
                      <td>                        
                        ActivityStarter1<br>
                      </td>
                      <td>
                        <span class="ButtonText">DataUri</span> indica a la aplicación Maps cual es el mapa que debe abrir<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        crea <span class="ButtonText">DataUri</span> a partir de dos piezas de texto
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("geo:0,0?q=")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        la primera parte de <span class="ButtonText">DataUri</span> esperada por Maps
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ListPicker1.Selection</span>
                      </td>
                      <td>                        
                        ListPicker1                      
                      </td>
                      <td>
                        el elemento que elije el usuario
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ActivityStarter1.StartActivity</span>
                      </td>
                      <td>                        
                        ActivityStarter1                      
                      </td>
                      <td>
                        inicia Maps
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="199" src="MapTourAssets/afterPicking.png" width="541">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Cuando el usuario elige un elemento de <span class="ButtonText">ListPicker</span>, el evento <span class="ButtonText">AfterPicking</span> se activa. El elemento elegido se coloca en la propiedad <span class="ButtonText">ListPicker1.Selection</span>. Por lo que si el usuario elige "Musee du Louvre", ese valor se colocará en la propiedad <span class="ButtonText">Selection</span> de <span class="ButtonText">ListPicker1</span>
              </p>
              <p>
                En el diseñador de componentes, ya has preparado las propiedades del componente <span class="ButtonText">ActivityStarter</span> para que inicie la aplicación Maps. Aquí solo necesitas indicar que mapa debe mostrarse. La propiedad <span class="ButtonText">DataUri</span> de ActivityStarter te permite especificar esto usando un protocolo especial.
              </p>
              <p>
                En este caso, quieres mostrar el mapa que aparecería si introdujeses "Musee du Louvre" en la caja de busqueda de de la aplicación Maps. Para hacer esto, <span class="ButtonText">DataUri</span> debe ajustarse a:
              </p>
              <blockquote>                
                geo:0,0?q='Musee du Louvre'              
              </blockquote>
              <p>
                El bloque <span class="ButtonText">make a text</span> crea un texto exactamente como este, solo que el texto después de "q=" será la elección hecha por el usuario.
              </p>
              <p>
                Una vez que <span class="ButtonText">DataUri</span> está preparado, <span class="ButtonText">ActivityStarter1.StartActivity</span> inicia la aplicación Maps.
              </p>
              <blockquote class="notice">
                Si necesitas ayuda con los parámetros de la aplicación Maps, mira este <a href="http://mapki.com/wiki/Google_Map_Parameters">document</a> de mapki.com
              </blockquote>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> Reinicia la aplicación y haz clic de nuevo en "Choose Destinations". Cuando eliges un destino, ¿Aparece un mapa de ese destino? Puedes hacer clic en el botón atrás para volver a tu aplicación y elegir otra vez (para salir de la aplicación tendrás que pulsar atrás un par de veces)
              </blockquote>
              <h2>
                Map Tour, Programa final
              </h2>
              <div class="imagecontainer">
                <img alt="" height="451" src="MapTourAssets/mapTourFinal.png" width="541">
              </div>
              <h2>
                Revisión
              </h2>
              <p>
                Estas son algunas de las ideas examinadas en este tutorial:
              </p>
              <ul>
                <li>El componente <span class="ButtonText">ListPicker</span> permite al usuario elegir de una lista de elementos. La propiedad <span class="ButtonText">Elements</span> de <span class="ButtonText">ListPicker</span> mantiene la lista, la propiedad <span class="ButtonText">Selection</span> mantiene el elemento seleccionado, y el evento <span class="ButtonText">AfterPicking</span> se inicia cuando el usuario elige.<br>
                </li>
                <li>El componente <span class="ButtonText">ActivityStarter</span> te permite iniciar otras aplicaciones. Este tutorial muestra su uso con la aplicación Maps, pero puedes iniciar un navegador o cualquier otra aplicación -- incluso una de las tuyas.
                </li>
                <li>Mira la <a href="../../../learn/reference/other/activitystarter.html">página de referencia de Activity Starter</a> para mas detalles.
                </li>
                <li>Aprende usos mas sofisticados de <span class="ButtonText">ActivityStarter</span> y del componente <span class="ButtonText">ListPicker</span> en <a href="../../../learn/tutorials/maptour/maptour2.html">MapTour Parte 2</a>.<br>
                </li>
              </ul>
              <h2>
                Escanea la aplicación de ejemplo para tu teléfono
              </h2>
              <p>
                Escanea el siguiente código Qr con tu teléfono para instalar y ejecutar la aplicación de ejemplo.
              </p>
              <div class="imagecontainer">
                <img alt="" src="MapTourAssets/barcode.png">
              </div>
              <h2>
                Descarga el código fuente
              </h2>Si te ha gustado trabajar con este ejemplo en App Inventor, descarga el <a href="MapTourAssets/MapTour.zip">código fuente</a> a tu computadora, despues abre App Inventor, ve a la página <span class="ButtonText">My Projects</span>, y elige <span class="ButtonText">More Actions | Upload Source</span>.
            </div>
            <blockquote class="notice">
              Google agradece al <a href="http://www.appinventor.org/">Profesor David Wolber</a>, Profesor de Ciencias de la Computación en la Universidad de San Francisco, el desarrollo de este tutorial.
            </blockquote>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-legal">
          <p>
            <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png"></a><br>
            Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license">Creative Commons Attribution-NonCommercial 3.0 Unported License</a>.
          </p>
          <p>
            El trabajo original de Google se ha modificado<br>
            El trabajo modificado fue traducido del Inglés al Español<br>
            <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
          </p>
        </div>
        <div class="footer-lastupdate">
          <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
          </script>
        </div>
      </div>
    </div>
  </body>
</html>

